<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小遊戲 - 彈球遊戲學習</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #2C3E50;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        
        .game-container {
            text-align: center;
            color: white;
        }
        
        .game-title {
            font-size: 2em;
            margin-bottom: 20px;
            color: #ECF0F1;
        }
        
        .game-description {
            font-size: 1.1em;
            margin-bottom: 30px;
            color: #BDC3C7;
            max-width: 600px;
            line-height: 1.6;
        }
        
        .instructions {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
            text-align: left;
        }
        
        .instructions h3 {
            margin-top: 0;
            color: #3498DB;
        }
        
        .instructions ul {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .instructions li {
            margin: 5px 0;
        }
        
        .warning {
            background-color: rgba(231, 76, 60, 0.2);
            border: 1px solid #E74C3C;
            padding: 15px;
            border-radius: 5px;
            margin: 20px 0;
        }
        
        .warning h4 {
            margin-top: 0;
            color: #E74C3C;
        }
        
        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }
        
        .feature {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        
        .feature-icon {
            font-size: 2em;
            margin-bottom: 10px;
        }
        
        .feature h4 {
            margin: 10px 0;
            color: #3498DB;
        }
        
        .download-btn {
            background-color: #27AE60;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            font-size: 1.1em;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            margin: 10px;
            transition: background-color 0.3s;
        }
        
        .download-btn:hover {
            background-color: #229954;
        }
        
        .code-preview {
            background-color: rgba(0, 0, 0, 0.3);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            text-align: left;
            overflow-x: auto;
        }
        
        .code-preview pre {
            margin: 0;
            color: #ECF0F1;
            font-family: 'Courier New', monospace;
        }
        
        .highlight {
            color: #F39C12;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1 class="game-title">🎮 微信小遊戲 - 彈球遊戲學習</h1>
        
        <p class="game-description">
            這是一個完整的微信小遊戲學習項目，包含經典的彈球玩法、美觀的視覺效果、
            觸摸控制系統以及完整的遊戲邏輯。適合初學者學習微信小遊戲開發。
        </p>
        
        <div class="warning">
            <h4>⚠️ 重要提醒</h4>
            <p>此項目需要在微信開發者工具中運行，無法在普通瀏覽器中直接運行。</p>
            <p>請下載微信開發者工具並導入項目文件夾來體驗遊戲。</p>
        </div>
        
        <div class="features">
            <div class="feature">
                <div class="feature-icon">🎯</div>
                <h4>經典玩法</h4>
                <p>經典的彈球遊戲，控制擋板擊碎磚塊</p>
            </div>
            <div class="feature">
                <div class="feature-icon">📱</div>
                <h4>觸摸控制</h4>
                <p>流暢的觸摸控制，完美適配手機</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🎨</div>
                <h4>美觀界面</h4>
                <p>現代化的視覺設計，色彩豐富</p>
            </div>
            <div class="feature">
                <div class="feature-icon">🏆</div>
                <h4>分數系統</h4>
                <p>完整的分數和生命值系統</p>
            </div>
        </div>
        
        <div class="instructions">
            <h3>📋 項目文件說明</h3>
            <ul>
                <li><strong>game.js</strong> - 主遊戲邏輯文件，包含所有遊戲功能</li>
                <li><strong>utils.js</strong> - 工具函數庫，提供常用開發工具</li>
                <li><strong>game.json</strong> - 遊戲配置文件</li>
                <li><strong>project.config.json</strong> - 微信開發者工具項目配置</li>
                <li><strong>README.md</strong> - 詳細的項目說明文檔</li>
            </ul>
        </div>
        
        <div class="code-preview">
            <h3>💻 代碼預覽</h3>
            <pre><code>// 遊戲狀態管理
const gameState = {
  canvas: null,           // 畫布對象
  ctx: null,              // 繪圖上下文
  ball: {                 // 球的屬性
    x: 200,               // 球的X座標
    y: 300,               // 球的Y座標
    radius: 10,           // 球的半徑
    dx: 3,                // 球的X方向速度
    dy: -3,               // 球的Y方向速度
    color: <span class="highlight">'#FF6B6B'</span>      // 球的顏色
  },
  // ... 更多遊戲配置
};

// 遊戲主循環
function gameLoop() {
  if (!gameState.gameRunning) return;
  
  updateGame();    // 更新遊戲狀態
  renderGame();    // 渲染遊戲畫面
  
  requestAnimationFrame(gameLoop);  // 繼續下一幀
}</code></pre>
        </div>
        
        <div class="instructions">
            <h3>🚀 如何運行</h3>
            <ol>
                <li>下載並安裝 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank">微信開發者工具</a></li>
                <li>打開微信開發者工具，選擇"導入項目"</li>
                <li>選擇本項目文件夾</li>
                <li>填入您的 AppID（或使用測試號）</li>
                <li>點擊"編譯"按鈕開始遊戲</li>
            </ol>
        </div>
        
        <div class="instructions">
            <h3>📚 學習重點</h3>
            <ul>
                <li><strong>微信小遊戲基礎</strong> - Canvas API、觸摸事件、系統信息</li>
                <li><strong>遊戲開發概念</strong> - 遊戲循環、碰撞檢測、狀態管理</li>
                <li><strong>JavaScript 技巧</strong> - ES6+ 語法、面向對象編程</li>
                <li><strong>最佳實踐</strong> - 代碼組織、性能優化、錯誤處理</li>
            </ul>
        </div>
        
        <a href="#" class="download-btn" onclick="downloadProject()">📥 下載項目文件</a>
        <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank" class="download-btn">🔧 下載開發者工具</a>
    </div>
    
    <script>
        function downloadProject() {
            alert('請手動下載項目文件夾中的所有文件。\n\n包含文件：\n- game.js\n- utils.js\n- game.json\n- project.config.json\n- README.md');
        }
        
        // 添加一些互動效果
        document.addEventListener('DOMContentLoaded', function() {
            const features = document.querySelectorAll('.feature');
            features.forEach(feature => {
                feature.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05)';
                    this.style.transition = 'transform 0.3s';
                });
                
                feature.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
            });
        });
    </script>
</body>
</html> 